<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../dist/bg-svg-watermark.js"></script>
</head>
<body>

</body>

<script>
    function parseNum(num) {
        return num > 9 ? String(num) : `0${num}`
    }

     function formatTime2(date) {
        date = date || new Date()
        return `${date.getFullYear()}-${parseNum(date.getMonth() + 1)}-${parseNum(date.getDate())} ${parseNum(
            date.getHours()
        )}:${parseNum(date.getMinutes())}:${parseNum(date.getSeconds())}`
    }

    /**
     * 基于 requestAnimationFrame 实现的 setInterval ，能在页面切换到后台时自动暂停
     * @param cb {Function}
     * @param t {number}
     * @return {(function(): void)|*}
     */
    function mySetInterval(cb, t) {
        let time = 0

        function func() {
            if (time === -1) {
                return
            }
            if (time !== 0) {
                if (Date.now() - time >= t) {
                    time = Date.now()
                    cb()
                }
            } else {
                time = Date.now()
                cb()
            }
            requestAnimationFrame(func)
        }

        func()

        return () => {
            time = -1
        }
    }

     function setWatermark(realName, ip) {
        const watermark = new Watermark.Watermark()

        const options = {
            // 旋转角度 默认值：45
            rotate: '45',
            // 文本透明度 默认值：0.1
            opacity: '1',
            // 文本大小 默认值：16
            fontSize: '16px',
            // 文本加粗 默认值：normal
            fontWeight: 'normal',
            // 文本距离外边的 padding 默认值：20
            padding: 20,
            // 文本间距 默认值：8
            space: 16,
            // 文本颜色 使用16进制颜色会渲染不出来，原因未知 默认值：rgb(0,0,0)
            color: 'rgba(0,0,0,0.3)'
        }

        const clear = mySetInterval(() => {
            const time = formatTime2()
            watermark.render(["192.168.0.1", "西塔机卡迪", time], options)
        }, 1000)

        return () => {
            clear()
            watermark.removeWatermark()
        }

    }
        setWatermark()
</script>
</html>
